import React, { Component,Fragment,createContext } from 'react'
// 该组件式不会包含样式，只和数据交互，所单独定义
// 方法包含两个组件Provider提供者和Consumer消费者)
console.log(createContext())
// 如果需要使用createContext需要解构出啦
const {
    // 下面两个组件包裹的对象（children）必须为函数类型（Provider用于提供状态，Consumer用于接收状态）
    Provider,
    // 解构出来重新复制给CounterConsumer
    Consumer: CounterConsumer //Consumer 可以消费Provider提供的共享数据 重新解析出来指向命名为CounterConsumer
} = createContext()
// 提供数据共享的组件，组件需要使用Provider包裹
class CounterProvider extends Component {
    constructor(){
        super()
        // 定义共享数据对象
        this.state = {
            count: 101
        }
    }
    // 定义两个修改共享数据对象的函数
    incrementfnProvider = () => {
        this.setState({
            count: this.state.count+1
        })
    }
    decrementfnProvider = () => {
        this.setState({
            count: this.state.count-1
        })
    }

    render() {
        return (
            // Provider有个value 可以接收任意参数，可以式对象
            <Provider value={
                //参数对象
                {
                    count: this.state.count,
                    // 传递函数类型参数
                    incrementfn: this.incrementfnProvider,
                    decrementfn: this.decrementfnProvider
                }
            }>
                {this.props.children}
            </Provider>
        )
    }
}

// 只导出需要的组件
export {
    CounterConsumer,
    CounterProvider
}